<template>
    <div v-bind:style="{height:activityHeight}">
            <div class="workGroup" >
                <!-- 組内信息 -->
                <Row>
                    <Col span="7">
                        <div class="workGroupNav" v-bind:style="{height:GroupHeight}">
                            <span>坐席信息</span>
                            <p >姓名：{{loginUserInfo.curHandlerName}}</p>
                            <p >工号：{{loginUserInfo.curHandlerNo}}</p>
                            <p >技能组：{{user_group_name || "无"}}</p>
                        </div>
                    </Col>
                    <!-- 關鍵KPI -->
                    <Col span="16" offset="1">
                        <p class="workGroupTit">关键KPI</p>
                         <Table :height="workGroupNavHeight" :columns="workGroupcolumns" :data="workGroupdata" ></Table>
                    </Col>
                </Row>
            </div>

           <div class="workPageMaker">
               <!-- 排班信息 -->
                <Row>
                    <Col span="7">
                        <div class="workLoginNav" v-bind:style="{height:PageMakerHeight}">
                            <span>消息中心</span>
                            <p>标记工单明细：{{markTaskList.length? "":"暂无"}}</p>
                            <p style="word-break:break-word;" v-for="(item,index) in markTaskList " class="annList" :key="item.ticketId"> <a :href="'#/taskdetail?id='+item.ticketId+'&action_type=taskMine'" @click="markErrorReady(item.id)">您有一个工单被标记为错误，内容为{{item.content}}</a></p>
                            <!-- <p >消息内容：</p> -->
                            <p >公告:{{announceList.length? "":"暂无"}}</p>
                            <p style="word-break:break-word;" v-for="(item,index) in announceList "  class="annList":key="item.title" ><a href="#/ownannouncement">{{item.title}}</a></p>
                        </div>
                    </Col>
                    <!-- 工單信息 -->
                    <Col span="16" offset="1">
                            <p class="workGroupTit">工单任务</p>
                            <Table :height="workPageMakerHeight" :columns="workPageMakercolumns" :data="workPageMakerdata"></Table>
                    </Col>
                </Row>
            </div>
             <!-- 员工登录信息 -->

            <div class="workLogin">
                <Row>
                    <Col span="7">
                        <div class="workPageMakerNav" v-bind:style="{height:LoginHeight}">
                            <span>排班信息</span>
                            <p>今日班次:{{todayClassType || "暂无"}}</p>
                            <DatePicker type="date"    placeholder="查看其他班次"  style="width: 90%" :size="pickerSize" :confirm="PickerConfirm" :editable="PickerEditable" @on-change="searchClassGrade"></DatePicker>
                        </div>
                    </Col>
                    <!-- 工單信息 -->
                    <Col span="16" offset="1">
                            <p class="workLoginTit">座席状态</p>
                            <Table :height="workLoginHeight"  :columns="workLogincolumns" :data="workLogindata"></Table>
                    </Col>
                </Row>
            </div>
    </div>
</template>
<style scoped>

    .workGroup{
        height: 29%;
        margin-bottom: 10px;
    }
    .workGroupNav{
        width: 100%;
        height: 147px;
        border: 1px solid #e9eaec;
    }
    .workGroupNav span{
        width: 100%;
        padding:0px ;
        color: #ffffff;
        background-color: #f85415 ;
        border-bottom: 1px solid #e9eaec;
        display: block;
        margin-bottom: 3px;
    }
    .workGroupNav p{
        text-align:left;
        padding-left: 20px;

    }
    .workGroup .workGroupTit{
        color:aliceblue;
        height: 20px;
        border: 1px solid #bfbfbf;
        background-color: #f85415;
    }
    .workPageMaker{
        height: 39%;
        margin-bottom: 15px;
    }
    .workPageMakerNav{
        width: 100%;
        height: 200px;
        border: 1px solid #e9eaec;
    }
    .workPageMakerNav span{
        width: 100%;
        padding:0px ;
        color: #ffffff;
        background-color: #f89515 ;
        border-bottom: 1px solid #e9eaec;
        display: block;
        margin-bottom: 3px;
    }
    .workPageMakerNav p{
        text-align:left;
        padding-top: 10px;
        padding-left: 20px;
        padding-bottom: 15px;
    }
    .workPageMaker .workGroupTit{
         color:aliceblue;
        height: 20px;
        border: 1px solid #bfbfbf;
        background-color: #f89515;
    }
    .workLogin{
        height: 29%;
        margin-bottom: 10px;
    }
    .workLoginNav{
        width: 100%;
        height: 170px;
        border: 1px solid #e9eaec;
        overflow-y: auto;
    }
    .workLoginNav span{
        width: 100%;
        padding:0px ;
        color: #ffffff;
        background-color: #0fab64 ;
        border-bottom: 1px solid #e9eaec;
        display: block;
        margin-bottom: 3px;
    }
    .workLoginNav p{
        text-align:left;
        padding-left: 20px;

    }
    .workLogin .workLoginTit{
         color:aliceblue;
        height: 20px;
        border: 1px solid #bfbfbf;
        background-color: #0fab64;
    }
    .annList{
        padding-left:50px!important;
    }

</style>
<script>
import homeService from "service/homeService.js";
import announcement from "service/announcement.js";
import {
  mapGetters
} from 'vuex';
import taskService from 'service/taskService.js';
    export default {
        name: 'main',
        data () {
            return {
                screenWidth: document.body.clientWidth,
                 pickerSize:'large',
                PickerConfirm:true,
                PickerEditable:false,
                workGroupNavHeight:'130',
                workPageMakerHeight:'150',
                workLoginHeight:'170',
                GroupHeight:'200',
                PageMakerHeight:"",
                LoginHeight:'',
                activityHeight:'0px',
                todayClassType:"",
                user_group_name:"",
                announceList:[],
                markTaskList:[],
                // workGroup
                workGroupcolumns: [
                    {
                        title: '24小时首解',
                        key: 'name'
                    },
                    {
                        title: '产能',
                        key: 'age'
                    },
                    {
                        title: '满意度',
                        key: 'address'
                    }
                ],
                workGroupdata: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    },
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ],
                //abstract
                workPageMakercolumns: [
                    {
                        title: '工单号',
                        key: 'serialNo'
                    },
                    {
                        title: '工单状态',
                        key: 'status',
                        width:'20%',
                        render: (h, params) => {
                        return this.Func.getChineseTaskStatus(params.row.status)
                    }
                    },
                    {
                        title: '开单时间',
                        key: 'createTime'
                    },
                    {
                        title: '加急工单',
                        key: 'address'
                    },
                    {
                        title: '追单次数',
                        key: 'appendCount',
                        width:'100px'
                    }
                ],
                workPageMakerdata: [],
                workLogincolumns: [
                    {
                        title: '登陆时长',
                        key: 'name'
                    },
                    {
                        title: '呼入总时长',
                        key: 'age'
                    },
                    {
                        title: '外呼总时长',
                        key: 'age'
                    },
                    {
                        title: '小休时长',
                        key: 'address'
                    },
                    {
                        title: '空闲时长',
                        key: 'num'
                    },
                    {
                        title: '呼入量',
                        key: 'num'
                    },
                    {
                        title: '呼出量',
                        key: 'num'
                    }

                ],
                workLogindata: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',


                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03',
                        num: '2016-10-03'
                    }
                ]
            }
        },
      computed: {
        ...mapGetters({
          loginUserInfo: 'loginUserInfo',
        }),
      },
         methods:{
            makeHeight(){
                let winHeight=0;
                let _this=this;
                if (window.innerHeight)
                winHeight = window.innerHeight;
                else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
                // 通过深入 Document 内部对 body 进行检测，获取窗口大小
                if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
                {
                winHeight = document.documentElement.clientHeight;
                // winWidth = document.documentElement.clientWidth;
                }
                _this.activityHeight=winHeight-90-90+"px";
                _this.workGroupNavHeight =  (winHeight-90-90)*0.29-15;
                _this.GroupHeight = (winHeight-90-90)*0.29+"px";
                _this.workPageMakerHeight =  (winHeight-90-90)*0.39-15;
                _this.PageMakerHeight = (winHeight-90-90)*0.39+"px";
                _this.workLoginHeight =  (winHeight-90-90)*0.28-15;
                _this.LoginHeight = (winHeight-90-90)*0.28+"px";
                return winHeight;
            },
            async getClassGradeInfo(data) {
                if(!this.loginUserInfo.userId){
                 return false;
                }
                let vm= this;
                var date = data ? data :vm.getTodayDate()
                let jsondata = await homeService.classGradeInfo({
                    userId: this.loginUserInfo.userId,
                    arrangeDate:date
                })
                vm.classInfo= jsondata;
                if(vm.classInfo){
                    vm.todayClassType=jsondata.classesName;
                }
            },
            async getUserClassGroup(data) {
                if(!this.loginUserInfo.userId){
                    return false;
                }
                let vm= this;
                let jsondata = await homeService.userClassGroup({
                    userId: this.loginUserInfo.userId
                })
                let group_list=jsondata;
                jsondata.forEach((item, index) => {
                    if (item.skillName) {
                        let icon_ = index ? "、":"";
                        vm.user_group_name=vm.user_group_name+icon_+item.skillName;
                    }
                });
            },
            searchClassGrade(response){
                this.getClassGradeInfo(response)
            },
            getTodayDate(){
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                return currentdate;
            },
            async getAnnouncementList() {
                if(!this.loginUserInfo.userId){
                  return false;
                }
                let userKey = this.loginUserInfo.userId;
                let search_data={
                    pageNumber:0,
                    pageSize:1000
                };
                let vm = this;
                let jsondata = await announcement.list(search_data,userKey)
                vm.loading=false;
                let anList=jsondata.content;
                vm.announceList=[];
                anList.forEach(function(item){
                    if(!item.readeTime && item.noticeType!="2"){
                        vm.announceList.push(item)
                    }
                })
            },
            async getTaskPending(){
                if(!this.loginUserInfo.userId){
                   return false;
                }
                let taskPendingList = await taskService.getHomeTaskPending(
                    this.loginUserInfo.curHandlerGroupId)
                if (taskPendingList.state) {
                    this.workPageMakerdata = taskPendingList.data.content;
                }
            },
            async getHomeMarkTaskInfo(){
                if(!this.loginUserInfo.userId){
                   return false;
                }
                let taskMarkList = await homeService.getHomeMarkTaskInfo(
                    this.loginUserInfo.userId)
                if (taskMarkList.state) {
                    this.markTaskList = taskMarkList.data;
                }
            },
            async markErrorReady(id){
                let taskMarkList = await taskService.readErrorTask(id)
                if (taskMarkList.state) {
                    
                }

            }
        },
         watch: {
            screenWidth (val) {
                if (!this.timer) {
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        // that.screenWidth = that.$store.state.canvasWidth
                        console.log(that.screenWidth)
                        that.init()
                        that.timer = false
                    }, 400)
                }
            },
            loginUserInfo(newVal, oldVal) {
                this.getClassGradeInfo();
                this.getUserClassGroup();
                this.getAnnouncementList();
                this.getTaskPending();
                this.getHomeMarkTaskInfo();
            }
        },
        mounted(){
            this.getClassGradeInfo();
            this.getUserClassGroup();
            this.getAnnouncementList();
            this.getTaskPending();
            this.getHomeMarkTaskInfo();
            this.makeHeight();
             const that = this
            window.onresize = () => {
                return (() => {
                    // window.screenWidth = document.body.clientWidth
                    // that.screenWidth = window.screenWidth
                     this.makeHeight();
                })()
            }

        }

    }
</script>
